<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>日历</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      margin: 0;
    }

    .All {
      width: 500px;
      background-color: rgb(255, 0, 0);
      margin: 20px auto;
    }

    span {
      color: white;

    }

    .All>header {
      display: flex;
      justify-content: space-between;
      padding: 1rem;
    }

    .All>.day,
    .week {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
    }

    .week {
      border-top: 1px solid #333;
      padding-top: 0.8rem;
    }

    .All>.day span,
    .week span {
      width: calc(100% / 7);
      text-align: center;
      height: 2rem;
    }

    a {
      text-decoration: none;
      color: white;
      display: inline-block;
      margin-right: 10px;
    }

    #date {
      font-size: 25px;
    }

    #back {
      width: 30px;
      height: 30px;
      background-image: url(images/back.png);
      -webkit-background-size: ;
      background-size: 100% 100%;
    }

    #next {
      width: 30px;
      height: 30px;
      background-image: url(images/more.png);
      -webkit-background-size: ;
      background-size: 100% 100%;
    }
  </style>
</head>

<body>
  <section class="All">
    <header>
      <span id="date">2017年<b>1</b>月</span>
      <span>
        <a href="#" id="back"></a>
        <a href="#" id="next"></a>
      </span>
    </header>
    <section class="week"></section>
    <section class="day"></section>
  </section>
</body>

</html>

<script>


  var dayEle = document.querySelector('.day');
  var weekEle = document.querySelector('.week');
  var container = document.querySelector('.day');
  var bEle = document.querySelector('b');
  var weekDay = ['一', '二', '三', '四', '五', '六', '日'];
  var bigMonth = [1, 3, 5, 7, 8, 10, 12];
  var next = document.querySelector('#next');
  var back = document.querySelector('#back');


  /**
   * 创建星期的方法
   */
  function creatWeek() {
    for (var i = 0; i < 7; i++) {
      var spanEle = document.createElement('span');
      spanEle.innerHTML = weekDay[i];
      weekEle.appendChild(spanEle);
    }
  }
  creatWeek();



  /**
   * 判断这个月的第一天是星期几方法
   *
   */

  function judgeMonth(monthNum) {
    var myDate = new Date(2017, monthNum - 1, 1);
    var firstDayWeek = myDate.getDay();
    if (firstDayWeek == 0) {
      firstDayWeek = 7;
    }
    return firstDayWeek;
  }

  /**
   *判断大小月的方法
   */
  function monthBigSmall(monthNum) {
    for (var i = 0; i < bigMonth.length; i++) {
      if (bigMonth[i] == monthNum) {
        return 31;
      }
      else if (monthNum == 2) {
        return 28;
      }
    }
    return 30;
  }


  /**
   * 创建主要标签的方法
   */
  var w = 0;

  function creatDay(num) {
    var lastMonthDay = num;
    console.log(num);
    lastMonthDay = lastMonthDay == 1 ? monthBigSmall(12) : monthBigSmall(num - 1);
    lastMonthDay = lastMonthDay - judgeMonth(num) + 2;
    console.log(lastMonthDay);
    for (var h = 1; h <= 42; h++) {

      var spanEle = document.createElement('span');
      if (h >= monthBigSmall(num) + judgeMonth(num)) {
        w++;
        spanEle.innerHTML = w;
        spanEle.style.color = '#333';
      }
      else if (h >= judgeMonth(num)) {
        spanEle.innerHTML = h - judgeMonth(num) + 1;
      }
      else {

        spanEle.innerHTML = lastMonthDay;
        spanEle.style.color = '#333';
        lastMonthDay++;
      }
      container.appendChild(spanEle);
    }
    w = 0;
  }

  /**
   * 默认创建了一月份的主要标签
   */
  creatDay(1);


  /**
   * 点击改变日期字体的方法
   */

  function changeText() {
    bEle.innerHTML = changeMonth;
  }


  var changeMonth = 1; //初始的月份设置为1

  /**
   * 点击了下一次按钮事件
   */
  next.onclick = function () {
    changeMonth++;
    while (container.hasChildNodes()) {
      container.removeChild(container.firstChild);
    }
    if (changeMonth > 12) {
      changeMonth = 1;
    }

    creatDay(changeMonth);
    changeText();
  };
  /**
   * 点击上一次按钮的事件
   */
  back.onclick = function () {
    changeMonth--;
    while (container.hasChildNodes()) {
      container.removeChild(container.firstChild);
    }
    if (changeMonth <= 0) {
      changeMonth = 12;
    }

    creatDay(changeMonth);
    changeText();
  }

</script>